<script setup>
  import {ref} from "vue";

  const n1=ref('')
  const n2=ref('')
  const n3=ref('')
  const btn=(a)=>{
    if(isNaN(n1)||isNaN(n2)){
        alert('请输入数字')
        return;
      }
    //eval():
    n3.value=eval(n1.value+a+n2.value)
    // if(isNaN(n1)||isNaN(n2)){
    //   alert('请输入数字')
    //   return;
    // }
    // let n11=parseFloat(n1.value)
    // let n22=parseFloat(n2.value)
    // switch (a) {
    //   case '+':
    //     n3.value=n11+n22
    //     break;
    //   case '-':
    //     n3.value=n11-n22
    //     break;
    //   case '*':
    //     n3.value=n11*n22
    //     break;
    //   case '/':
    //     n3.value=n11/n22
    //     break;
    // }
  }
</script>

<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="n1">
  <input type="text" placeholder="请输入数字2" v-model="n2">
  <hr>
  <button @click="btn('+')">加</button>
  <button @click="btn('-')">减</button>
  <button @click="btn('*')">乘</button>
  <button @click="btn('/')">除</button>
  <h3>运算结果：{{n3}}</h3>
</template>

<style scoped>

</style>